.pieChars-wrap {
    max-height: 296px;
    max-width: 600px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.chars-btn-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    z-index: 999;
    .chars-btn {
        cursor: pointer;
        &.prev {
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 12px solid #00F6FF;
            &.disabled {
                border-bottom: 12px solid #8CBDD2;
                pointer-events: none;
            }
        }
        &.next {
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 12px solid #00F6FF;
            &.disabled {
                border-top: 12px solid #8CBDD2;
                pointer-events: none;
            }
        }
        &.middle {
            padding: 0 8px;
            color: #CDCFD2;
        }
    }
}

.pieChars {
    margin: 24px;
    background: rgba(0, 123, 255, .1);
    background-size: contain;
    background-position: 16px center;
    position: relative;
    &::before,
    &:after {
        content: "";
        position: absolute;
        pointer-events: none;
        width: 16px;
        height: 100%;
        border: 1px solid #8CBDD2;
        top: 0;
    }
    &:before {
        border-right: none;
        left: 0;
    }
    &:after {
        border-left: none;
        right: 0;
    }
    .chars {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        max-height: 180px;
        z-index: 20;
    }
    .circle-bg {
        pointer-events: none;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        max-height: 180px;
        max-width: 180px;
        &::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: url("./img/bg_in.png") no-repeat;
            background-size: contain;
            background-position: center center;
        }
        &:after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: url("./img/yuan.png") no-repeat;
            background-size: contain;
            -webkit-animation: reRotateBg 12s linear infinite;
            animation: reRotateBg 12s linear infinite;
        }
        img {
            height: 100%;
        }
        .point {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            &::before {
                content: "";
                position: absolute;
                width: calc(100% - 16px);
                height: calc(100% - 16px);
                top: 8px;
                left: 8px;
                background: url("./img/bg_in2.png") no-repeat;
                background-size: contain;
                -webkit-animation: shownBg 2.5s linear infinite;
                animation: shownBg 2.5s linear infinite;
            }
            &:after {
                position: absolute;
                content: "";
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background: url("./img/light.png") no-repeat;
                background-size: contain;
                -webkit-animation: rotateBg 3s linear infinite;
                animation: rotateBg 3s linear infinite;
            }
        }
    }
    .box {
        position: absolute;
        height: 50px;
        width: calc(100% - 48px);
        &::before,
        &:after {
            content: "";
            position: absolute;
            pointer-events: none;
            width: 16px;
            height: 100%;
            border: 1px solid #8CBDD2;
            top: 0;
        }
        &:before {
            border-right: none;
            left: 0;
        }
        &:after {
            border-left: none;
            right: 0;
        }
    }
}

@-webkit-keyframes rotateBg {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotateBg {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes reRotateBg {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes reRotateBg {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes shownBg {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    41% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes shownBg {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    41% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.pieChars[vertical] {
    .chars {
        max-height: 100%;
    }
    .circle-bg {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        max-height: 220px;
        max-width: 220px;
    }
}